<script lang="ts" setup>
import { queryOtherChargeTableCol } from '@/api/expense/types/expense'

defineProps<{
  data: queryOtherChargeTableCol[]
  loading: boolean
}>()

const emits = defineEmits(['open-adjust', 'open-refund'])
const openAdjust = (row: queryOtherChargeTableCol) => {
  emits('open-adjust', row)
}
const openRefund = (row: queryOtherChargeTableCol) => {
  emits('open-refund', row)
}
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column prop="phone" label="用户手机号" min-width="150" align="center" />
    <el-table-column prop="bikeCode" label="车辆编号" min-width="120" align="center" />
    <el-table-column prop="operationType" label="收费类型" align="center" />
    <el-table-column
      prop="reason"
      label="费用说明"
      min-width="150"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column prop="orderId" label="关联订单/行程编号" min-width="200" align="center" />
    <el-table-column prop="changeTime" label="收费时间" min-width="200" align="center" />
    <el-table-column prop="imageUrls" label="相关图片" align="center">
      <template #default="scope">
        <div v-if="scope.row.imageUrls">
          <el-image
            v-for="(img, index) in scope.row.imageUrls.split(',')"
            :key="index"
            :src="img"
            :preview-src-list="scope.row.imageUrls.split(',')"
            w-50
            h-50
            :preview-teleported="true"
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="amount" label="收费金额" align="center" />
    <el-table-column prop="payStatus" label="支付状态" align="center">
      <template #default="scope">
        <span
          :style="{
            color:
              scope.row.payStatus === '已支付'
                ? 'var(--xy-success-color)'
                : 'var(--xy-warning-color)'
          }"
          >{{ scope.row.payStatus }}</span
        >
      </template>
    </el-table-column>
    <el-table-column prop="payTime" label="支付时间" min-width="200" align="center" />
    <el-table-column prop="paymentType" label="支付方式" align="center" />
    <el-table-column prop="tradeNo" label="充值订单号" min-width="200" show-overflow-tooltip />
    <el-table-column
      prop="operator"
      label="操作人"
      min-width="110"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center" />
    <el-table-column label="操作" align="center" fixed="right">
      <template #default="scope">
        <el-button
          v-if="scope.row.payStatus === '待支付'"
          link
          type="primary"
          class="is-open"
          @click="openAdjust(scope.row)"
          >待付调整</el-button
        >
        <el-button v-else link type="primary" class="is-open" @click="openRefund(scope.row)"
          >退费</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
